<template>
  <list-card>
    <template v-slot:search>
      <el-form ref="queryForm" :model="queryParams" inline size="small">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="queryParams.name" clearable placeholder="请输入菜单名称"
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item v-if="showSearch" label="菜单编码" prop="code">
          <el-input v-model="queryParams.code" clearable placeholder="请输入菜单编码"
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item v-if="showSearch" label="菜单状态" prop="status">
          <el-select v-model="queryParams.status" clearable placeholder="菜单状态">
            <el-option v-for="item in localDict.menu_status" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template v-slot:operate>
      <el-button v-has-permi="['system:dept:add']" icon="el-icon-plus" plain size="mini" type="primary"
                 @click="handleAdd">新增
      </el-button>
      <right-toolbar :show-extend.sync="expandAll" :showSearch.sync="showSearch" tree
                     @queryTable="getList" @expand="handleReload"/>
    </template>
    <template v-slot:content>
      <el-table v-if="refreshed" v-loading="loading" :data="dataList" :default-expand-all="expandAll" :lazy="true"
                :load="handleLoad" :tree-props="{children: 'children', hasChildren: 'hasChild'}" row-key="id">
        <el-table-column :show-overflow-tooltip="true" label="菜单名称" prop="name" min-width="160"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="菜单编码" prop="code" min-width="120"></el-table-column>
        <el-table-column align="center" label="图标" prop="icon" width="100">
          <template v-slot:default="scope">
            <svg-icon :icon-class="scope.row.icon"/>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="访问路径" prop="url" min-width="120"/>
        <el-table-column :show-overflow-tooltip="true" label="组件名称" prop="component"
                         min-width="120"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="组件路径" prop="path" min-width="180"></el-table-column>
        <el-table-column label="状态" prop="status" width="80">
          <template v-slot:default="scope">
            <dict-tag :options="localDict.menu_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" width="60"/>
        <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="200px">
          <template v-slot:default="scope">
            <el-button v-has-permi="['system:menu:edit']" icon="el-icon-edit" size="mini" type="text"
                       @click="handleEdit(scope.row)">修改
            </el-button>
            <el-button v-has-permi="['system:menu:add']" icon="el-icon-plus" size="mini" type="text"
                       @click="handleAdd(scope.row)">新增
            </el-button>
            <el-button v-has-permi="['system:menu:remove']" icon="el-icon-delete" size="mini" type="text"
                       @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <model-card ref="model" @ok="handleReload"/>
  </list-card>
</template>

<script>
import {remove} from "@/api/base";
import {child, tree} from "@/api/tree";
import {getStaticData} from "@/api/common";
import ModelCard from "./components/ModelCard.vue";
import listMixin from "../../../mixins/listMixin";

export default {
  name: "Menu",
  mixins: [listMixin],
  components: {ModelCard},
  data() {
    return {
      // 遮罩层
      loading: true,
      baseUrl: '/system/menu',
      // 是否展开，默认全部折叠
      expandAll: false,
      // 重新渲染表格状态
      refreshed: true,
      showSearch: false,
      // 表格树数据
      dataList: [],
      // 查询参数
      queryParams: {
        name: undefined,
        status: undefined
      },
      localDict: {
        menu_type: [],
        menu_status: []
      },

    };
  },
  created() {
    this.getLocalDict();
    this.resetQuery()
  },
  methods: {
    async getLocalDict() {
      await this.getStaticData('system-menu-type').then(res => {
        this.localDict.menu_type = res.data
      })
      await this.getStaticData('system-status').then(res => {
        this.localDict.menu_status = res.data
      })
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true;
      tree(this.baseUrl, {...this.queryParams, expand: this.expandAll}).then(res => {
        this.dataList = res.data;
        this.loading = false;
      })
    },
    // 树形动态加载表单数据：
    handleLoad(tree, treeNode, resolve) {
      child(this.baseUrl, tree.id, this.queryParams).then((res) => {
        return resolve(res.data);
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleReload() {
      this.refreshed = false;
      this.expandAll = !this.expandAll;
      this.$nextTick(() => {
        this.getList()
        this.refreshed = true;
      });
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.$refs.model.add(row != null && row.id ? row.id : '0')
    },
    /** 修改按钮操作 */
    handleEdit(row) {
      this.$refs.model.edit(row.id)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除名称为"' + row.name + '"的菜单及其子菜单？').then(() => {
          remove(this.baseUrl, row.id, true).then(() => {
            this.handleQuery();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {
          })
        }
      );
    },
  }
};
</script>
